
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { X, User } from "lucide-react";
import { useState } from "react";
import { toast } from "@/components/ui/sonner";
import { Profile } from "@/types/profile";

interface EditProfileDialogProps {
  profile: Profile;
  onProfileUpdate: (profile: Profile) => void;
  children: React.ReactNode;
}

export const EditProfileDialog = ({ profile, onProfileUpdate, children }: EditProfileDialogProps) => {
  const [newInterest, setNewInterest] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  
  const addInterest = () => {
    if (!newInterest.trim()) return;
    
    if (profile.interests.includes(newInterest.trim())) {
      toast.error("This interest is already in your profile");
      return;
    }
    
    if (profile.interests.length >= 8) {
      toast.error("You can add up to 8 interests");
      return;
    }
    
    onProfileUpdate({
      ...profile,
      interests: [...profile.interests, newInterest.trim()]
    });
    setNewInterest("");
    toast.success("Interest added to your profile");
  };
  
  const removeInterest = (interest: string) => {
    onProfileUpdate({
      ...profile,
      interests: profile.interests.filter(item => item !== interest)
    });
    toast.success("Interest removed from your profile");
  };
  
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    onProfileUpdate({
      ...profile,
      [name]: value
    });
  };
  
  const handleSave = () => {
    toast.success("Profile updated successfully");
    setIsOpen(false);
  };

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        {children}
      </DialogTrigger>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Edit Profile</DialogTitle>
          <DialogDescription>
            Update your personal information and interests
          </DialogDescription>
        </DialogHeader>
        
        <div className="space-y-6">
          {/* Avatar Section */}
          <div className="flex flex-col items-center space-y-4">
            <Avatar className="w-24 h-24">
              <AvatarImage src="https://api.dicebear.com/7.x/micah/svg?seed=profile" />
              <AvatarFallback><User className="w-8 h-8" /></AvatarFallback>
            </Avatar>
            <Button variant="outline" size="sm">
              Change Photo
            </Button>
          </div>
          
          {/* Personal Information */}
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">Name</Label>
              <Input
                id="name"
                name="name"
                value={profile.name}
                onChange={handleChange}
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                name="email"
                type="email"
                value={profile.email}
                onChange={handleChange}
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="bio">Bio</Label>
              <Textarea
                id="bio"
                name="bio"
                value={profile.bio}
                onChange={handleChange}
                rows={4}
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="interests">Interests</Label>
              <div className="flex flex-wrap gap-2 mb-2">
                {profile.interests.map(interest => (
                  <Badge key={interest} className="px-2 py-1 flex items-center gap-1">
                    {interest}
                    <button 
                      onClick={() => removeInterest(interest)}
                      className="ml-1 rounded-full hover:bg-muted p-0.5"
                    >
                      <X className="w-3 h-3" />
                    </button>
                  </Badge>
                ))}
              </div>
              <div className="flex gap-2">
                <Input
                  id="interest"
                  value={newInterest}
                  onChange={(e) => setNewInterest(e.target.value)}
                  placeholder="Add a new interest"
                  className="flex-1"
                />
                <Button onClick={addInterest} type="button">Add</Button>
              </div>
            </div>
          </div>
          
          <div className="flex justify-end gap-2 pt-4">
            <Button variant="outline" onClick={() => setIsOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleSave}>
              Save Changes
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};
